<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  * {
    padding: 0;
    margin: 0;
  }
  body {
    height: 2000px;
    border: 1px solid black;
  }
  #box {
    width: 200px;
    height: 200px;
    background-color: pink;
  }
  .btn-wrap {
    width: 500px;
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
</style>
<body>
  <!-- 考试要求：
    1 鼠标按下 box，其1S经动画变为圆形；鼠标松开，其1S经动画恢复原样。
    2 每次 keydown -> box 获得随机背景颜色。
    3 可随意拖动box，但box不能被拖出 <body/>。
    4 输入 x/y 坐标，点击 go 按钮，box 从当前位置 经动画move  到 x/y 位置。
        若输入非法坐标（包括 box 移出 <body/> 的实况也视为 非法坐标）
          alert 提醒非法坐标，box 位置保持不变。


    注：
      1. 考试文件命名规则：[自己姓名].html
      2. 不要压缩，将单文件 QQ 单独传给我
  -->

  <div id="box"></div>
  <div class="btn-wrap">
    <span>
      x: <input type="text" class="input-x">
    </span>
    <span>
      y: <input type="text" class="input-y">
    </span>
    <button>GO</button>
  </div>
</body>
</html>